<template>
	<view class="card">
		<view class="card-head " :class="BorderBottomClass">
			<slot name="head"></slot>
		</view>
		<template v-if="showBodySlot && $slots.body">
			<view class="card-body">
				<slot name="body"></slot>
			</view>
		</template>
	</view>
</template>

<script>
	export default {
		props: {

			showBodySlot: {
				type: Boolean,
				default: true
			}
		},
		computed: {
			ShowBorderBottom() {
				return !!this.$slots?.body
			},
			BorderBottomClass() {
				return this.ShowBorderBottom ? 'u-border-bottom' : ''
			}
		}

	}
</script>

<style lang="scss" scoped>
	.card {
		background: #FFFFFF;
		box-shadow: 0 32rpx 10rpx -10rpx #E6EBF2;
		border-radius: 20rpx;
		padding: 0 20rpx;
		margin-top: 30rpx;

		&-head {
			padding: 30rpx 0;
			font-weight: 600;
			font-size: 28rpx;
			color: #0F2E4D;
			position: relative;

			&::before {
				content: '';
				position: absolute;
				top: 36rpx;
				left: -20rpx;
				display: inline-block;
				width: 4rpx;
				height: 28rpx;
				background: #409EFF;
				border-radius: 2rpx;
			}
		}

		&-body {
			padding-bottom: 30rpx;
		}
	}
</style>
